<template>
  <div>
    <el-table border="true" :data="listData" v-loading="listLoading">
      <!-- 表头 -->
      <el-table-column v-for="headerItem, headerIndex in tableHeader" :key="headerIndex" :label="headerItem.label"
        :prop="headerItem.prop" align="center" :min-width="headerItem.minWidth">
        <!-- 每一行的插槽 -->
        <template #default="scope">
          <!-- 操作 -->
          <div v-if="headerItem.prop == 'operate'">
            <el-button v-for="btn, btnIndex in headerItem.btn" :key="btnIndex" :type="btn.type"
              @click.native.prevent="btn.func(scope.row)">
              {{ btn.name }}
            </el-button>
          </div>
          <!-- tages -->
          <div v-if="headerItem.isTags">
            <el-tag :type="headerItem.formatter(scope.row.status)"> {{ scope.row.status }} </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
interface Props {
  listData?: any;  //渲染的数据
  listLoading?: boolean; //是否加载中
  tableHeader?: any; //表头
}
const props = withDefaults(defineProps<Props>(), {})

onMounted(() => {

})

</script>

<style scoped>
</style>